<template>
    <div >
        <Layout :style="{minHeight: '100vh'}">
            <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
                <Menu active-name="1" theme="dark" width="auto" :class="menuitemClasses" @on-select="onMenuItemSelect">
                  <template >
                  <MenuItem :name="item.name" v-for="item in menuList"  :key="item.blogContentRefid" >
                    <Icon type="ios-navigate"></Icon>
                    <span>{{item.blogTitle}}</span>
                  </MenuItem>
                  </template>
                </Menu>
            </Sider>
            <Layout>
                <Content :style="{padding: '0 16px 16px'}">
                    <Card>
                      <mavon-editor :value="blogContent"
                                    ref='md'
                                    :subfield = "false"
                                    :defaultOpen = "'preview'"
                                    :toolbarsFlag = "false"
                                    :editable="false"
                                    scrollStyle="true"
                                    :ishljs = "true"
                                    style='min-height: 400px'></mavon-editor>
                    </Card>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>
<script>
  import {GetAllBlogTitleBySubRefid, GetBlogContentByRefid} from '../../api/getData'
  import {mavonEditor} from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  export default {
    name: 'topic',
    components: {
      mavonEditor
    },
    mounted() {
      window.scrollTo(0,0)
      let refid = this.$route.params.refid
      let param = {blogContentForeignKey: refid}
      GetAllBlogTitleBySubRefid(param, (result) => {
        if (result.errorCode === 'OK') {
          this.menuList = result.data
          for (let i = 0; i < this.menuList.length; i++) {
            this.menuList[i].name = i
          }
        }
      })
    },
    data() {
      return {
        isCollapsed: false,
        menuList: [],
        blogContent: ''
      }
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    methods: {
      onMenuItemSelect (name) {
        window.console.log(name)
        for (var i = 0; i < this.menuList.length; i++) {
          if (this.menuList[i].name === name) {
            let blogContentRefid = this.menuList[i].blogContentRefid
            window.console.log(blogContentRefid)
            this.getBlogContentByRefid(blogContentRefid)
            break
          }
        }
      },
      getBlogContentByRefid (refid) {
        let params = {blogRefid: refid}
        GetBlogContentByRefid(params, (result) => {
          if (result.errorCode === 'OK') {
            if (result.data.length > 0) {
              this.blogContent = result.data[0].blogContent
            }
          }
        })
      }
    }
  }
</script>

<style scoped>
    .ivu-layout-sider {
        background: #ffffff;
    }
    .ivu-menu-dark {
        background: #ffffff;
    }
    .layout-con{
        height: 100%;
        width: 100%;
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    .ivu-menu-submenu-title {
        color: black;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title {
        color: black;
    }
    .ivu-menu-item-selected {
        background: #ffffff;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):hover, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover {
        background: #ffffff;
    }
    .ivu-layout-sider-trigger {
        background: #ffffff!important;
    }
    .ivu-menu-item {
        padding: 7px 24px!important;
    }
    .ivu-card {
      text-align: left;
    }




